<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header a{
            color: #666;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 1200px;margin: 0 auto">
                <img style="vertical-align: middle" src="img/logo.jpg" width="80">
                <a href="">首页</a><el-divider direction="vertical"></el-divider>
                <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
                <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                <a href="">购物车</a><el-divider direction="vertical"></el-divider>
                <a href="">我的订单</a><el-divider direction="vertical"></el-divider>
                <a href="">帮助</a>
                <div style="float: right;position: relative;top: 10px">
                    <el-input type="text" style="margin-left: -22px">
                        <!--这是一个搜索按钮-->

                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
        </el-header>




        <el-main style="width: 1200px;margin: 0 auto">
            <el-row gutter="20">


                <el-col span="12" v-for="p in pArr">
                    <el-card>
                        <img :src="p.url" width="100%">
                    </el-card>
                </el-col>


                <el-col span="12">
                    <p style="font-size: 25px;font-weight: bold">{{p.title}}</p>
                    <el-divider></el-divider>
                    <p style="font-size: 15px;color: #666">
                        {{p.saleCount}}人已付款
                    </p>
                    <p style="font-size: 15px;color: #666">
                        库存:{{p.num}}件
                    </p>
                    <p style="font-size: 20px;font-weight: bold">
                        ￥{{p.price}} <span style="font-size: 15px;color: #666">原价:<s>{{p.oldPrice}}</s></span>
                    </p>


                    <!--<el-row gutter="10" style="text-align: center">
                        <el-col span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%">
                            </el-card>
                            <p>扫码关注公众号</p>
                        </el-col>
                        <el-col span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%">
                            </el-card>
                            <p>扫码购买商品</p>
                        </el-col>
                        <el-col span="8">
                            <el-card>
                                <img src="imgs/ewm.jpg" width="100%">
                            </el-card>
                            <p>扫码下载App</p>
                        </el-col>
                    </el-row>-->


                </el-col>
            </el-row>
        </el-main>





    </el-container>



</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                arr:[],
                pArr:[{title:"情趣丝袜",price:233,oldPrice:598,url:"img/s1.jpg",saleCount:2342,num:23},
                    {title:"情趣丝袜",price:233,oldPrice:598,url:"img/s2.jpg",saleCount:2342,num:53},
                    {title:"情趣丝袜",price:233,oldPrice:598,url:"img/s3.jpg",saleCount:2342,num:33},
                    {title:"【佟丽娅同款】情趣丝袜",price:233,oldPrice:598,url:"img/s4.jpg",saleCount:2342,num:83},
                    {title:"情趣丝袜",price:233,oldPrice:598,url:"img/s5.jpg",saleCount:2342,num:28},
                    {title:"jk套装",price:233,oldPrice:598,url:"img/jk2.jpg",saleCount:2342,num:24},
                    {title:"jk套装",price:233,oldPrice:598,url:"img/jk3.jpg",saleCount:2342,num:255},
                    {title:"jk套装 贺岁系列",price:233,oldPrice:598,url:"img/jk4.jpg",saleCount:2342,num:93},
                    {title:"jk套装",price:233,oldPrice:598,url:"img/jk5.jpg",saleCount:2342,num:63},
                    {title:"BEASTER 牛仔裤",price:233,oldPrice:598,url:"img/n1.jpg",saleCount:2342,num:83},
                    {title:"牛仔裤",price:233,oldPrice:598,url:"img/n2.jpg",saleCount:2342,num:29},
                    {title:"牛仔裤",price:233,oldPrice:598,url:"img/n3.jpg",saleCount:2342,num:99},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d1.jpg",saleCount:2342,num:59},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d2.jpg",saleCount:2342,num:44},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d3.jpg",saleCount:2342,num:68},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d4.jpg",saleCount:2342,num:78}],
                wd:""
            }
        },
        methods:{

        },
        created:function (){

        }
    })
</script>
</html>